<template>
	<div class="ratingselect">
		<div class="rating-type border-1px">
			<span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span class="cont">{{ratings.length}}</span></span>	
			<span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span class="cont">25</span></span>
			<span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span class="cont">25</span></span>		
		</div>

		<div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
			<span class="icon-check-circle">+</span>
			<span class="text">只看有内容的评价</span>

		</div>

	</div>
</template>


<script type="text/javascript">

import Vue from 'vue'
import cartControl from '../cartcontrol/cartcontrol'  // 商品加减按钮组件

const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2

export default{
    props: {
        ratings: {
            type: Array,
            default() {
                return []
            }
        },
        selectType: {
            type: Number,
            default: ALL
        },
        onlyContent: {
            type: Boolean,
            default: false
        },
        desc: {
            type: Object,
            default() {
                return {
                    all: '全部',
                    positive: '满意',
                    negative: '不满意'
                }
            }
        }
    },
    methods: {
    	select(type, event){
    		this.selectType = type
    	}
    	// this.selectType = type
    	// this.$dis
    },
    toggleContent(){
    	this.onlyContent = !this.onlyContent
    }

}

</script>


<style lang="stylus" rel="stylesheet/stylus">
border-1px($color)
  position: relative
  &:after
    content: ''
    position: absolute
    bottom: 0
    left: 0
    display: block
    width: 100%
    border-top: 1px solid $color

.ratingselect
	.rating-type
		padding 18px 0
		margin 0 18px
		border-1px(rgba(7,17,27,0.1))
		font-size 0
		.block
			display inline-block
			padding 8px 12px
			margin-right 8px
			border-radius 1px
			font-size 12px
			color rgb(77,85,93)
			line-height 16px
			&.active
				color #fff
			.cont
				font-size 8px
				margin-left 2px
			&.positive
				background rgba(0,160,220,0.2)
				&.active
					background rgb(0,160,220)
			&.negative
				background rgba(77,85,93,0.2)
				&.active
					background rgb(77, 85, 93)
	.switch
		padding 12px 18px
		line-height 24px
		border-bottom 1px solid rgba(7,17,27,0.1)
		color rgb(147, 153, 159)
		// font-size 0px
		&.on
			.icon-check-circle
				color #00c850
		.icon-check-circle
			display inline-block
			vertical-align top
			margin-right 4px
			font-size 24px
		.text
			display inline-block
			vertical-align top			
			font-size 12px

</style>

